<template>
  <div class="cremation_statistics overflowY" v-loading="loading">
    <div class="PageContent">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        :rules='rules'
        label-width="100px"
      >
        <div class="PageItem margintop20">
          <el-row class="paddingleft2em">
            <el-form-item>
              <el-select
                v-model="ruleForm.selects"
                multiple
                placeholder="请选择殡仪馆"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.organizationName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="reserveDate">
              <el-date-picker
                v-model="ruleForm.reserveDate"
                type="year"
                placeholder="选择年"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                v-if="btnRight.btnSearch"
                @click="submitForm('ruleForm')"
                >查询</el-button
              >
            </el-form-item>
          </el-row>
        </div>
      </el-form>
      <div class="PageItem">
        <div id="myCharts" ref="myCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as API from '@/api/civilAffairsBureau/index'
export default {
  data() {
    return {
      myCharts: null,
      loading: false,//加载
      options: [

      ],
      startValue: 0, // 区域缩放的起点值
      endValue: 3, // 区域缩放的终点值
      timerId: null,
      colorArr:["#A35AE0","#00CA98","#f34e2b",'#FF9502','#33574B','#BB002B','#7EFF02','#D0FA58','#FE2EF7','#01DFD7','#AEB404','#FF8000'],
      ruleForm: {
        reserveDate: this.$dayjs(new Date()).format("YYYY"), //日期
        selects: [], //殡仪馆
      },
      rules:{
        reserveDate:[
          { required: true, message: '请输入年份', trigger: 'blur' }
        ]
      },
      option:{
        grid: {
          left: 50,
          top: 80,
          right: 20,
          bottom: 20,
        },
        tooltip: {},
        legend: {
          show: true,
          icon: "circle",
          orient: "horizontal",
          top: "0.5%",
          right: "8%",
          itemWidth: 18.5,
          itemHeight: 6,
          itemGap: 30,
          textStyle: {
            // color: '#FFFFFF'
            color: "#C9C8CD",
          },
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisLine:{
            show:true,
            lineStyle:{
              color:"#666666"
            }
          }
        },
        yAxis: {
          axisLine:{
            show:true,
            lineStyle:{
              color:"#666666"
            }
          }
        },
        series: [],
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
      },
      myChartsData:[],
      //按钮权限
        btnRight: {
          btnSearch: false,

        },
    };
  },
  created(){
      //获取殡仪馆列表
      this.findSelectUserOrganization()
    setTimeout(()=>{
      //获取数据
      this.getData()
      },1000)
  },
  // watch:{
  //   myChartsData:{
  //     deep: true,
  //     handler(newVal){
  //       if(this.myCharts){

  //         this.option.series=JSON.parse(JSON.stringify(newVal)),
  //         this.myCharts.setOption(this.option)
  //       }
  //       }
  //     }
  //   },
  mounted() {
    //按钮权限
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] =
          this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
      }
    //初始化图表
    this.initMyCharts();

    window.removeEventListener('resize', ()=>{
      this.myCharts.resize()
    })
  },
  methods: {
     //初始化图表
    initMyCharts() {
      this.myCharts = this.$echarts.init(this.$refs.myCharts);
      this.myCharts.setOption(this.option);
       this.myCharts.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.myCharts.on("mouseout", () => {
        this.startInterval();
      });
    },
    //获取殡仪馆数据
    async findSelectUserOrganization(){
      const res= await API.findSelectUserOrganization();
      if(res.code==1){
        this.options=res.data
      }else{
        this.$message.error('数据读取失败');
      }
    },
    //获取图表数据
    async getData(){
      this.myCharts.showLoading()
      let params={
        reserveDate:this.$dayjs(this.ruleForm.reserveDate).format("YYYY"),
        selects:this.ruleForm.selects
      }
      const res = await API.findSelectYearFuneralCremation(params)
        if(res.code==1){
          let arr=[]
          if(res.data.yearCemeteries!=null){
            res.data.yearCemeteries.forEach((item,index)=>{
              let obj={
                name: item.cremateName,
                type: "bar",
                id:index,
                barWidth: 20,
                itemStyle: {
                  normal: {
                    color: this.colorArr[index],
                    barBorderRadius: [10, 10, 0, 0],
                  },
                },
                data:item.cremateNumber,
              }
              arr.push(obj);
            })
          }
          this.myChartsData=arr
        }else{
          this.$message.error('数据读取失败');
        }
        this.updatedMyCharts();
        this.startInterval();
    },
    updatedMyCharts(){

      this.option.dataZoom={
        show: false,
        startValue: this.startValue,
        endValue: this.endValue,
      }
      this.option.series=JSON.parse(JSON.stringify(this.myChartsData))
      this.myCharts.hideLoading();
      this.myCharts.setOption(this.option,true)
    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getData()
          } else {
            return false;
          }
        });
    },

    //启动定时器
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.startValue++;
        this.endValue++;
        if (this.endValue > 11) {
          this.startValue = 0;
          this.endValue = 3;
        }
         this.updatedMyCharts();
      }, 2000);
    },
  },
  destroyed() {
    window.removeEventListener("resize", () => {
       this.myCharts.resize()
    });
    clearInterval(this.timerId);
  },
};
</script>

<style lang="scss" scoped>
.cremation_statistics {
  width: 100%;
  .PageContent /deep/ .el-input {
    width: 300px;
  }
  /deep/ .el-button--primary{
    background-color:#37B7FF ;
    border-color:#37B7FF ;
  }
  .PageContent /deep/ .el-select {
    width: 300px;
  }
  #myCharts {
    width: 100%;
    height: 500px;
  }
}
</style>
